<template>
  <div>
    <!-- pc端显示 -->
    <div class="all_layout">
      <div class="content_top">
        <div class="content_middle">
          <div class="middle-left">OpenHarmony开发样例</div>
          <div class="middle-rigth">
            <el-menu router
                     class="el-menu-demo2"
                     mode="horizontal">
              <el-menu-item v-for="routerItem in routerList"
                            :key="routerItem.titleId"
                            :class="{ middleMenu: curentTagId == routerItem.titleId }">
                <router-link @click.native="changeTag(routerItem)"
                             :to="{
                    name: 'allFeatures',
                    query: { 
                      titleId: routerItem.titleId,
                      osTypeId: $route.query.osTypeId,
                      osVersionId: $route.query.osVersionId,
                    },
                  }">{{ routerItem.name }}</router-link>
              </el-menu-item>
            </el-menu>
          </div>
        </div>
      </div>
      <div class="content_wrapper">
        <router-view></router-view>
      </div>
    </div>
    <!-- 移动端显示 -->
    <div class="mobile_layout">
      <div class="content_top">
        <div v-show="flag"
             class="content_middle">
          <div class="middle-left">OpenHarmony开发样例</div>
          <div class="middle-rigth">
            <slipeNav :navList="routerList"
                      @changehandleNav="changehandleNav"></slipeNav>
          </div>
        </div>
      </div>
      <div class="content_wrapper">
        <router-view @successLoding="successLoding"></router-view>
      </div>
    </div>
  </div>
</template>
<script>
import slipeNav from "./commonComponent/slipeNav.vue";
import { mapActions, mapState } from "vuex";
export default {
  components: {
    slipeNav,
  },
  data () {
    return {
      activeIndex: "1",
      activeIndex2: "1",
      // routerList: [
      //   { titleId: 1, name: "应用开发" },
      //   { titleId: 2, name: "设备开发" },
      //   { titleId: 3, name: "样例共建排行榜" },
      //   { titleId: 4, name: "应用开发" },
      //   { titleId: 5, name: "设备开发" },
      //   { titleId: 6, name: "样例共建排行榜" },
      // ],
      curentTagId: 1,
      titleId: null,
      flag: "true",
    };
  },
  computed: {
    ...mapState({
      routerList: (state) => state.initData.titleList,
      levelList: (state) => state.initData.levelList,
      pageNo: (state) => state.initData.pageNum,
      pageSize: (state) => state.initData.pageSize,
    }),
  },
  methods: {
    ...mapActions(["setBreadcrumb", "getInitData"]),
    async searchAll (titleId) {
      let res = await this.$axios.get(
        "/knowledge/frontPage/queryInitialization",
        {
          params: {
            titleId: titleId,
            osTypeId: this.$route.query.osTypeId,
            osVersionId: this.$route.query.osVersionId,
            pageNum: this.pageNo,
            pageSize: this.pageSize,
          },
        }
      );
      if (res.data.code == 0) {
        let busTypeList = res.data.data.busTypeList;
        let featuresList = res.data.data.featuresList;
        let sampleList = res.data.data.sampleList;
        let titleList = res.data.data.titleList;
        busTypeList.length > 0 && this.setBreadcrumb({ type: 'bustype', ...busTypeList[0] })
        let osTypeList = res.data.data.osTypeList;
        let osVersionList = res.data.data.osVersionList;
        osTypeList.unshift({
          osTypeId: "0",
          name: "全部",
          sort: "1",
        });
        osVersionList.unshift({
          osVersionId: "0",
          name: "全部",
          sort: "1",
        });
        let totalNum = res.data.totalNum;
        this.getInitData({
          busTypeList,
          featuresList,
          sampleList,
          titleList,
          osTypeList,
          osVersionList,
          totalNum,
        });
      }
    },
    changeTag (routerItem) {
      // this.$router.push({ query: {} });
      this.titleId = routerItem.titleId;
      this.curentTagId = routerItem.titleId;
      this.searchAll(this.titleId);
      this.setBreadcrumb({ type: 'title', ...routerItem })
    },
    changehandleNav (item) {
      this.titleId = item.titleId;
      //更改url
      let query = {
        titleId: this.titleId,
        osTypeId: this.$route.query.osTypeId,
        osVersionId: this.$route.query.osVersionId,
      }

      this.$router.push({
        name: "allFeatures",
        query: query,
      });
      this.searchAll(this.titleId);
    },
    successLoding (flag) {
      this.flag = flag;
    },
  },
};
</script>
<style lang="less" scoped>
.mobile_layout {
  display: none !important;
}
.all_layout {
  display: flex;
  flex-direction: column;
  .content_top {
    .content_middle {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      height: 60px;
      background-color: #ffffff;
      border-bottom: 1px solid rgba(0, 0, 0, 0.08);
      .middle-left {
        padding-top: 18px;
        padding-bottom: 14px;
        padding-left: 40px;
        height: 28px;
        font-size: 24px;
        font-family: HarmonyOS_Sans_SC_Medium;
        color: #333333;
        line-height: 28px;
      }
      .middle-rigth {
        ::v-deep .el-menu {
          border: 0;
          .el-menu-item {
            font-size: 16px;
            border: 0;
            // .router-link-active {
            //   border-bottom: 2px solid #000000;
            // }
            a {
              // line-height: 64px;
              text-decoration: none;
              display: inline-block;
              height: inherit;
              width: inherit;
            }
          }
          .middleMenu {
            border-bottom: 2px solid #000000 !important;
          }
        }
      }
    }
  }
}
@media screen and (max-width: 540px) {
  .all_layout {
    display: none !important;
  }
  .mobile_layout {
    display: block !important;
    .content_top {
      background: #fafafa !important;
      .content_middle {
        display: flex;
        flex-direction: column;
        // justify-content: space-between;
        // position: relative;
        height: 80px !important;
        background-color: #ffffff;
        .nav-menu {
          position: absolute;
          // top: -10;
        }
        .middle-left {
          padding: 10px 16px 0px;
          height: 28px;
          font-size: 14px;
          font-family: HarmonyOS_Sans_SC_Medium;
          color: #000000;
          line-height: 28px;
          opacity: 0.9;
        }
        .middle-rigth {
          height: 42px;
        }
      }
    }
  }
  .content_wrapper {
    height: calc(100vh - 126px);
    overflow-y: auto;
  }
}
</style>
